<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { TableInstance } from 'element-plus'
import { usePositionListStore } from '../../store/positionList'
import { PositionList } from '../../utils/trueType'
import { useAddPosition } from '../../store/addPosition'
import position from '../../api/position'
import utils from '../../utils/utils'
import { useSearchPositionStore } from '../../store/position/positionSearch'
const searchPositionStore = useSearchPositionStore()
const addPositionStore = useAddPosition()
const positionListStore = usePositionListStore()
const multipleTableRef = ref<TableInstance>()
function handleSizeChange(val: PositionList[]) {
    position.getSpeciePosition(searchPositionStore.departmentSelect, searchPositionStore.positionName, searchPositionStore.status, positionListStore.pageNum, positionListStore.pageSize).then((res) => {
        positionListStore.setPositionList(res.data.data.data);
        positionListStore.total = res.data.data.total;
    }).catch((err) => {
        console.log(err);
    }).finally(() => {
        positionListStore.changeLoading()
    })
}
function handleCurrentChange(val: PositionList[]) {
    position.getSpeciePosition(searchPositionStore.departmentSelect, searchPositionStore.positionName, searchPositionStore.status, positionListStore.pageNum, positionListStore.pageSize).then((res) => {
        positionListStore.setPositionList(res.data.data.data);
        positionListStore.total = res.data.data.total;
    }).catch((err) => {
        console.log(err);
    }).finally(() => {
        positionListStore.changeLoading()
    })
}
async function editPosition(id) {
    await position.getEditPositionDetail(id).then(res => {
        addPositionStore.setPositionAdd(res.data.data)
        console.log(addPositionStore.positionAdd)
        addPositionStore.setIsOpen(true)
    }).catch(err => {
        console.log(err)
    })
}
async function deletePosition(id: string) {
    await position.deletePositionById(id).then(res => {
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        positionListStore.changeLoading()
    })
    await position.getAllPosition(positionListStore.pageNum, positionListStore.pageSize).then(res => {
        positionListStore.setPositionList(res.data.data)
    }).catch(err => {
        console.log(err)
    })
}
const selectable = (row: PositionList) => row.id
const handleSelectionChange = (val: PositionList[]) => {
    positionListStore.selectedIds = val.map(item => item.id).filter(id => id !== null && id !== undefined) as string[];
}
onMounted(async () => {
    await position.getAllPosition(positionListStore.pageNum, positionListStore.pageSize).then(res => {
        positionListStore.setPositionList(res.data.data)
        positionListStore.total = res.data.total
    }).catch(err => {
        console.log(err)
    })
})
</script>
<template>
    <el-table ref="multipleTableRef" v-loading="positionListStore.loading" :data="positionListStore.positionList"
        row-key="id" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" :selectable="selectable" width="55" />
        <el-table-column label="岗位编号" property="id" width="140" align="center" header-align="center" />
        <el-table-column property="positionName" label="岗位名称" width="160" align="center" header-align="center" />
        <el-table-column property="status" label="状态" width="140" align="center" header-align="center">
            <template #default="scope">
                <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">{{ scope.row.status === 1 ? '启用' : '禁用'
                    }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column property="deptName" label="部门" width="140" align="center" header-align="center" />
        <el-table-column property="maxHeadcount" label="编制人数" width="140" align="center" header-align="center" />
        <el-table-column property="currentHeadcount" label="当前人数" width="140" align="center" header-align="center" />
        <el-table-column property="time" label="创建时间" width="160" align="center" header-align="center">
            <template #default="scope">
                {{ utils.formatDate(scope.row.time) }}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="auto" align="center" header-align="center">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="editPosition(scope.row.id)">编辑</el-button>
                <el-button link type="primary" size="small" @click="deletePosition(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="positionListStore.pageNum" v-model:page-size="positionListStore.pageSize"
            :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper"
            :total="positionListStore.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>
<style scoped>
.demo-pagination-block {
    display: flex;
    justify-content: end;
    margin-top: 1rem;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>